<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梗百科 - 发布页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f0f8ff; 
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        .form-container {
            background: white;
            padding: 25px;
            width: 100%;
            /* max-width: 500px; */
            border-radius: 12px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #007BFF;
        }

        label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        input:focus, textarea:focus {
            border-color: #007BFF;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
            outline: none;
        }

        /* #image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        } */

        /* .preview-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        } */

        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #6ec6ff, #007BFF);
            color: white;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: linear-gradient(45deg, #007BFF, #0056b3);
            transform: scale(1.05);
        }

        @media (max-width: 600px) {
            .form-container {
                width: 90%;
                padding: 15px;
            }
        }
        .navbar {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #276bfc;
            color: white;
            padding: 12px 20px;
            font-size: 18px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
        }
        body{
            padding-top: 100px;

        }

        .nav-left {
            cursor: pointer;
            font-size: 25px;
        }

        .nav-left:hover {
            color: #ddd;
        }

        .nav-center {
            font-weight: bold;
            font-size: 30px;
        }

        .nav-right {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <!-- 左侧：返回首页 -->
        <div class="nav-left" onclick="goHome()">首页</div>
        
        <!-- 中间：标题 -->
        <div class="nav-center">梗 百 科</div>
        
        <!-- 右侧：实时时间 -->
        <div class="nav-right" id="time"></div>
    </div>
    <br>

    <div class="form-container">
        <h2>发布一个梗</h2>
        <form onsubmit="submitForm(event)" action="/"><!--需填入网址-->
            <label for="name">梗名称：</label>
            <input type="text" id="name" name="name" placeholder="输入梗的名字" required>

            <label for="description">详细解释：</label>
            <textarea id="description" name="description" rows="4" placeholder="介绍这个梗的含义" required></textarea>

            <label for="source">出处：</label>
            <input type="text" id="source" name="source" placeholder="填写出处（可选）">

            <label for="description">实例：</label>
            <textarea id="example" name="example" rows="4" placeholder="举几个例子" ></textarea>

            <!-- <label for="image">上传图片：</label> -->
            <!-- <input type="file" id="image" name="image" multiple accept="image/*" onchange="previewImages()">
            <div id="image-preview"></div> 预览上传的图片 -->

            <button type="submit" >提交</button>
        </form>
    </div>

    <script>
        function goHome() {
            window.location.href = "/"; // 修改为首页地址
        }

        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            document.getElementById("time").textContent = `${hours}:${minutes}:${seconds}`;
        }

        setInterval(updateTime, 1000); 
        updateTime(); 

        // function previewImages() {
        //     const previewContainer = document.getElementById('image-preview');
        //     previewContainer.innerHTML = ''; 

        //     const files = document.getElementById('image').files;
        //     for (let file of files) {
        //         const reader = new FileReader();
        //         reader.onload = function (e) {
        //             const img = document.createElement('img');
        //             img.src = e.target.result;
        //             img.classList.add('preview-img');
        //             previewContainer.appendChild(img);
        //         };
        //         reader.readAsDataURL(file);
        //     }
        // }

        function submitForm(event) {
            event.preventDefault();
            alert('🎉 提交成功！你的梗已发布。');
        }
    </script>

</body>
</html>
